<template>  
  <div class="container ping">
    <div class="login-container">  
      <h2>登录</h2>  
      <form @submit.prevent="handleSubmit">  
        <div class="form-item">  
          <label for="username">用户名:</label>  
          <input type="text" id="username" v-focus v-model="State.User.username" required>  
        </div>  
        <div class="form-item">  
          <label for="password">密码:</label>  
          <input type="password" id="password" v-model="State.User.password" required>  
        </div>  
        <button type="submit" class="login-button">登录</button>  
        <Slider style="font-family: 'DINAlternate', sans-serif;"></Slider>
        <SvgIcon name="loading" width="24" height="24" color="white"></SvgIcon>
        <button @click="changeTheme('default')">默认主题</button>
    <button @click="changeTheme('red')">红色主题</button>
      </form>  
    </div>  
  </div>
</template>  
  
<script setup lang="ts">  
import type Slider from "@/components/common/Slider.vue";
import login from "@/hooks/Login/index";
let {State,handleSubmit,changeTheme}=login();
</script>  
  
<style lang="less" scoped>
  @import "@/styles/login.less";

  .ping{
    color: var(--primary-color);
  }

</style>